<script setup>
import { getPetLocationTodayService } from '@/api/location'

import { ref, onMounted } from 'vue'
import { useTrackAnimation } from 'vue3-baidu-map-gl'
const map = ref(null)
const { setPath, start, cancel, stop, proceed, status } = useTrackAnimation(map, {
    duration: 10000,
    delay: 0
})

const props = defineProps({
    petId: {
        type: Number,
        required: true
    }
})

const getPetLocationToday = async () => {
    const data = await getPetLocationTodayService(props.petId)
    console.log(data)
}


const path = [
    {
        lng: 116.297611,
        lat: 40.047363
    },
    {
        lng: 116.302839,
        lat: 40.048219
    },
    {
        lng: 116.308301,
        lat: 40.050566
    },
    {
        lng: 116.305732,
        lat: 40.054957
    },
    {
        lng: 116.304754,
        lat: 40.057953
    },
    {
        lng: 116.306487,
        lat: 40.058312
    },
    {
        lng: 116.307223,
        lat: 40.056379
    }
]
function handleInitd() {
    setPath(path)
}

onMounted(() => {
    getPetLocationToday()
})

</script>

<template>
    <div class="track">
        <BMap v-bind="$attrs" :center="{
            lng: 116.308301,
            lat: 40.050566
        }" :zoom="16" :plugins="['TrackAnimation']" ref="map" @pluginReady="handleInitd" />
        <div class="state">
            <span>动画状态: {{ status !== 'INITIAL' ? '已开始' : '未开始' }}</span>
            <span>播放状态: {{ status === 'INITIAL' || status === 'STOPPING' ? '未播放' : '播放中' }}</span>
        </div>
        <button class="myButton no-m-b" type="button" @click="start">开始</button>
        <button class="myButton no-m-b" type="button" @click="stop">暂停</button>
        <button class="myButton no-m-b" type="button" @click="proceed">继续</button>
        <button class="myButton no-m-b" type="button" @click="cancel">取消</button>
    </div>
</template>


<style>
.track {
    width: 80%;
    margin-top: 10rem;
}

.state {
    margin-top: 15px;
}

.myButton {
    margin: 15px;
    padding: 10px 20px;
    cursor: pointer;
}

.no-m-b {
    margin-bottom: 0;
}

.state span {
    margin-right: 25px;
}
</style>